:root {
  // dashboard
  --app-content-bg-color: #002754;
  --app-font-color: #ffffff;

  // widget
  --widget-content-bg-color: transparent;
  --widget-font-color: #ffffff;

  // widget border
  --widget-border-color: rgba(255, 255, 255, 0.05);
  --widget-border-style: 2px solid;
  --widget-border-image: linear-gradient(
      135deg,
      rgba(115, 160, 227, 0.8),
      rgba(115, 160, 227, 0.08),
      rgba(115, 160, 227, 0.8)
    )
    1 1 1 1;

  // table
  --table-content-bg-color: transparent;
  --table-even-bg-color: #0265dc;
  --table-odd-bg-color: #004491;
  --table-head-bg-color: #002754

  // pagination
  --pagination-content-bg-color: transparent;

  // pageheader
  --design-button-bg-color:#0265DC;
  --page-header-font-size: 1.17vw;

  // scroll bar
  --scroll-thumb-color: rgba(255, 255, 255, 0.2);
  --scroll-corner-color: rgba(0, 0, 0, 0.4) !important;
  --scroll-track-color: transparent !important;
  --scroll-thumb-color--hover: rgba(255, 255, 255, 0.2);
  
}

.z-screen-hu{
  display: none;
}
.dashboard-page[theme] {
  background-color: var(--app-content-bg-color);
  color: var(--app-font-color);

  ::-webkit-scrollbar-corner {
    background-color: var(--scroll-corner-color) !important;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color) !important;
    &:hover {
      background-color: var(--scroll-thumb-color--hover) !important;
    }
  }
  ::-webkit-scrollbar-track {
    background-color: var(--scroll-track-color) !important;
  }

  .echarts-title{
    color: var(--widget-font-color)
  }
  .el-loading-mask {
    background-color: transparent;
  }

  .widget-page-header{
    background:url(https://oss.mspbots.ai/app/dashboard/header_bg.png) 0% 0% / cover no-repeat;
    color: var(--app-font-color);
    .menu-item-header{
      color: var(--app-font-color);
      font-size:calc(1.125rem + var(--page-header-font-size))
    }
    .cuifont{
      background: rgba(255,255,255,0.06);
      color: var(--app-font-color);
      margin-right: 6px;
      &:hover{
        background: rgba(255, 255, 255, 0.3);
      }
    }
    .design-button.el-button {
      background-color: var(--design-button-bg-color);
      border: 0;
      &:hover{
        background: rgba(56, 146, 243, 1);
      }
    }
    .bg-page-header{
      background-color: transparent !important;
    }
  }

  .widget-card {
    &-border {
      background: var(--widget-border-color);
      border: var(--widget-border-style);
      border-image: var(--widget-border-image);

      .el-card {
        background-color: var(--widget-content-bg-color) !important;
        border: 0;

        .control-section {
          margin: 1px 0 !important;
        }

        .e-content{
          background-color: var(--table-content-bg-color) !important;
          color: var(--app-font-color);
        }

        .e-grid {
          border: 0 !important;
          .el-lib{
            color: var(--app-font-color);
            background-color: var(--table-head-bg-color) !important;
          }
          .e-gridheader{
            border: 0;
            color: var(--app-font-color);
            background-color: var(--table-head-bg-color) !important;
          }
          .e-headercell{
            color: var(--app-font-color);
            background-color: var(--table-head-bg-color) !important;
          }
        }

        .e-gridcontent {
          background-color: var(--table-content-bg-color)
        }

        .toolbar{
          color: var(--app-font-color);
          background-color: var(--table-head-bg-color) !important;
          .toolbar_export_item,.toolbar_columns{
            color: var(--app-font-color);
            margin-right: 6px;
            &:hover{
              background: rgba(255, 255, 255, 0.3);
            }
          }
        }

        .e-table{
          color: var(--app-font-color);
          background-color: var(--table-head-bg-color) !important;

        
          tbody{
            .e-rowcell{
              border: 0;
            }
            .e-row:nth-child(even) {
              background: var(--table-even-bg-color);
              border-bottom: 0;
              td{
                color: var(--app-font-color);
              }
              &:hover > td {
                background:var(--table-even-bg-color);
                color: var(--app-font-color) !important;
              }
            }
            .e-row:nth-child(odd) {
              background: var(--table-odd-bg-color);
              td{
                color: var(--app-font-color);
              }
              &:hover > td {
                background: var(--table-odd-bg-color);
                color: var(--app-font-color) !important;
              }
            }
          }
        }


        .el-table {
          background-color: var(--table-content-bg-color);
          color: var(--app-font-color);
          border: 0;

          &::before,
          &::after {
            background-color: var(--table-content-bg-color);
          }

         
          &__footer {
            tr,th {
              background-color: var(--table-content-bg-color) !important;
            }
            td{
              color: var(--app-font-color);
              background-color: var(--app-content-bg-color);
            }
          }

          thead {
            color: var(--app-font-color);
            tr {
              background-color: var(--table-head-bg-color);
              border: 0;
              th {
                color: var(--app-font-color);
                background-color: var(--table-head-bg-color) !important;
                border: 0;
              }
            }
          }

          td {
            border: 0;
          }

          .el-table__body-wrapper {
            tr:nth-child(even) {
              background: var(--table-even-bg-color);
              &:hover > td {
                background:var(--table-even-bg-color);
              }
            }
            tr:nth-child(odd) {
              background: var(--table-odd-bg-color);
              &:hover > td {
                background: var(--table-odd-bg-color);;
              }
            }
          }
        }

        .el-pagination {
          color: var(--app-font-color);

          .btn-next,
          .btn-prev {
            background-color: var(--pagination-content-bg-color);
            color: var(--app-font-color);
          }

          .el-pager li {
            background-color: var(--pagination-content-bg-color);
          }

          .el-pager li.btn-quicknext,
          .el-pager li.btn-quickprev {
            color: var(--app-font-color);
          }

          .el-pagination__total {
            color: var(--app-font-color);
          }

          .el-pagination__sizes {
            .el-select input {
              color: var(--app-font-color);
              border: 0;
              background-color: var(--pagination-content-bg-color);
            }
          }
          .el-pagination__jump {
            color: var(--app-font-color);
            .el-input input {
              color: var(--app-font-color);
              border: 0;
              background-color: var(--pagination-content-bg-color);
            }
          }
        }
      }

    

      .cardHeader {
        border-bottom: var(--widget-border-style);
        border-image: var(--widget-border-image);
        .cardTitle{
          color: var(--app-font-color);
        }
      }
      .last-sync-class {
        border-top: var(--widget-border-style);
        border-image: var(--widget-border-image);
  
        background-color: var(--app-content-bg-color);
        color: var(--app-font-color);
        & > div {
          border-top: 0 !important;
        }
      }
    }
  }
}
